<template>
	<view class="conterakpap">
		<view class="Avatar">
			<view @click="goavatar" class="avatar">
				<!-- 放头像 -->
				<image mode="" :src="avatarImg"></image>
			</view>
			<view @click="goname" class="Name">{{ userInfo.nickname }}</view>
			<view class="Blockchain">
				<view class="Blockchain-name">区块链 :{{ userInfo.echainBlockchainAddress ? userInfo.echainBlockchainAddress : userInfo.wcBlockchainAddress }}</view>
				<view style="margin-top: 5rpx; margin-left: 10rpx">
					<u--image width="20rpx" height="20rpx" :src="imgUrl+'/static/images/iconimgpopoak47.png'" @click="copyText(userInfo.echainBlockchainAddress)" mode=""></u--image>
				</view>
			</view>
			<view class="Wallet" @click="goWallet">
				<image mode="widthFix" :src="imgUrl + '/static/images/Wallethome.png'"></image>
			</view>
		</view>
		<!-- 头像 -->
		<!-- 我的加密鸭  -->
		<view class="msg-box" @click="gocollect">
			<image :src="imgUrl + '/static/images/homeone.png'" mode=""></image>
			<view class="myduck">
				<view style="display: flex">
					<view class="">我的Duck（小窝）</view>
					<view style="margin-top: 8rpx; margin-left: 12rpx">
						<u-icon size="15" color="#FFF" name="play-right-fill"></u-icon>
					</view>
				</view>
				<view style="font-size: 42rpx; font-weight: 900; margin-top: 22.67rpx">{{ total }}只</view>
			</view>
		</view>
		<!-- 我的加密鸭  -->
		<!-- 背包道具 -->
		<view class="purchase-box">
			<view style="display: flex">
				<view class="order-txt">我的订单</view>
				<view style="margin-top: 22rpx">
					<image style="width: 46rpx; height: 40rpx" :src="imgUrl + '/static/images/SilencerIcon.png'" mode=""></image>
				</view>
			</view>
			<view class="purchase" style="margin-top: -15rpx">
				<view class="order-box" @click="Order">
					<u--image width="87rpx" height="87rpx" :src="imgUrl + '/static/images/order.png'"></u--image>
					<text style="margin: 0 -5rpx;">购买的</text>
				</view>
				<view @click="gorelease" class="order-box">
					<u--image width="87rpx" height="87rpx" :src="imgUrl + '/static/images/fabu.png'"></u--image>
					<text style="margin: 0 -5rpx;">发布的</text>
				</view>
				<view class="order-box" @click="goAlreaSale">
					<u--image width="87rpx" height="87rpx" :src="imgUrl + '/static/images/mai.png'"></u--image>
					<text style="margin: 0 -5rpx;">卖出的</text>
				</view>
				<view class="order-box" @click="goMyNal">
					<u--image width="87rpx" height="87rpx" :src="imgUrl + '/static/images/rizhi.png'"></u--image>
					<text style="margin: 0 -5rpx;">记录</text>
				</view>
			</view>
		</view>
		<!-- 背包道具 -->
		<!-- 邀请 -->
		<view class="invite-box">
			<view class="invite-box-header">
				<view style="display: flex">
					<view class="num">邀请好友</view>
					<view>
						<image style="width: 46rpx; height: 40rpx" :src="imgUrl + '/static/images/CelebrityGoose.png'" mode=""></image>
					</view>
				</view>
				<view class="reward">好友收到邀请将会获得奖励</view>
			</view>
			<view class="invite-box-footer">
				<view @click="invitation" class="right">
					<text>邀请好友</text>
				</view>
				<view class="left">
					<view class="box">
						<view class="shu">{{ rankList.length }}</view>
						<view class="ge">个</view>
					</view>
					<view class="box1">好友数</view>
				</view>
			</view>
		</view>
		<!-- 邀请 -->
		<!-- 我的订单 -->
		<view class="purchase-box" style="height: 405rpx">
			<view style="display: flex; padding-bottom: 10rpx">
				<view class="order-txt">常用功能</view>
			</view>
			<view class="purchase">
				<view class="order-box" @click="Account">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/set.png'"></u--image>
					<text>个人中心</text>
				</view>
				<view @click="goMyNal" class="order-box">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/rizitow.png'"></u--image>
					<text>记录</text>
				</view>
				<view @click="gotiantuan" class="order-box">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/tiantuan.png'"></u--image>
					<text>天团</text>
				</view>
				<view @click="public" class="order-box">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/paihangbang.png'"></u--image>
					<text>排行榜</text>
				</view>
				<view @click="public" class="order-box" style="margin-top: 55rpx">
					<u--image width="60rpx" height="55rpx" :src="imgUrl + '/static/images/echang.png'"></u--image>
					<text>鹅厂</text>
				</view>
				<view @click="public" class="order-box" style="margin-top: 50rpx">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/gerendaoyu.png'"></u--image>
					<text>个人岛屿</text>
				</view>
				<view @click="public" class="order-box" style="margin-top: 50rpx">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/chaxun.png'"></u--image>
					<text>查询</text>
				</view>
				<view  @click="setting" class="order-box" style="margin-top: 50rpx">
					<u--image width="60rpx" height="60rpx" :src="imgUrl + '/static/images/safe.png'"></u--image>
					<text>设置</text>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
	</view>
</template>

<script>
import { pagingQuery } from '@/api/venue/venue.js';
import HeadNav from '../../components/HeadNav/HeadNav.vue';
import config from '@/config';
import { getInfo } from '@/api/login';
import { getMyInvitation } from '../../api/message/message.js';
import { getUserAdmin } from '../../utils/auth.js';
import { getmyGuildLevel } from '@/api/index.js';
import { toast } from '@/utils/common';
const baseUrl = config.baseUrl;
const imgUrl = config.gillUrl;
export default {
	comments: {
		HeadNav
	},
	data() {
		return {
			page: 1, //当前页码
			size: 10, //每页显示条数
			total: 0,
			imgUrl: config.gillUrl,
			imgUrl: config.imgUrl,
			name: '',
			isHunting: -1,
			birthNumber: -1,
			status: 'loadmore',
			list1: [
				{
					name: '藏馆'
				},
				{
					name: '背包'
				},
				{
					name: '饰品'
				},
				{
					name: '土地'
				},
				{
					name: '道具'
				}
			],
			userInfo: {},
			avatarImg: '',
			user: getUserAdmin(),
			obj: {
				currentPage: 0,
				size: 1000
			},
			rankList: [],
			myInvitationCode: '',
			level: 'S'
		};
	},
	onShow() {
		this.mypagingQuery();
		this.getUserWithToken();
	},
	created() {
		this.getUserWithToken();
		this.getMyinvitation();
		this.getMyGuildDetail();
		this.mypagingQuery();
	},
	methods: {
		// 获取我有多少加密鸭
		async mypagingQuery() {
			let param = {};
			param.page = this.page;
			param.size = this.size;
			param.raceName = this.name; //此处数据等待筛选逻辑完成之后再添加
			param.isHunting = this.isHunting; // -1代表全部，0代表持有 1代表交易中 2代表狩猎中
			param.birthNumber = this.birthNumber;
			param.mature = 1; //是否是蛋，0蛋，1萌宝，默认为1
			const data = await pagingQuery(param);
			this.total = data.data.total;
		},
		async getMyGuildDetail() {
			const res = await getmyGuildLevel();
			// 拿到数据
			if (res.code == 200) {
				if (res.data == null) {
					// 如果data 等于空 就显示黑暗图片
					this.level = '';
				} else {
					this.level = res.data.level;
				}
			}
		},
		gotiantuan(){
			uni.switchTab({
				url: '/pages/work/circle'
			});
		},
		// 发布的
		gorelease() {
			uni.navigateTo({
				url: '/pages/release/release'
			});
		},
		// 点击 跳转 到头像页面
		goavatar() {
			uni.navigateTo({
				url: '/pages/AccountSecurity/avatar/index?avatarImg=' + this.avatarImg
			});
		},
		// 去场馆
		gocollect() {
			uni.navigateTo({
				url: '/pages/work/message'
			});
		},
		// 日志
		goMyNal() {
			uni.navigateTo({
				url: '/pages/myournal/myournal'
			});
		},
		// 去钱包
		goWallet() {
			uni.navigateTo({
				url: '/pages/wallet/wallet'
			});
		},
		//去卖出记录
		goAlreaSale() {
			uni.navigateTo({
				url: '/pages/hassold/hassold'
			});
		},
		// 修改名称
		goname() {
			uni.navigateTo({
				url: '/pages/AccountSecurity/Nickname/Nickname'
			});
		},
		// 获取用户信息
		async getUserWithToken() {
			const res = await getInfo();
			this.userInfo = res.data;
			this.avatarImg = imgUrl + this.userInfo.avatar;
		},
		async getMyinvitation() {
			let param = {};
			param.myInvitationCode = this.user.myInvitationCode;
			const res = await getMyInvitation(this.obj, param);
			// console.log(res, 'res');
			this.rankList = res.data.content;
		},
		// 点击复制
		copyText(number) {
			uni.setClipboardData({
				data: this.userInfo.echainBlockchainAddress,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		click(item) {
			this.monAndSzsTabsIndex = item.index;
		},
		Order() {
			uni.navigateTo({
				url: '/pages/order/order' // 跳转到目标页面的路径
			});
		},
		// 邀请
		Account() {
			uni.navigateTo({
				url: '/pages/AccountSecurity/Account/Account' // 跳转到目标页面的路径
			});
		},
		setting() {
			uni.navigateTo({
				url: '/pages/AccountSecurity/setting/index' // 跳转到目标页面的路径
			});
		},
		invitation() {
			uni.navigateTo({
				url: '/pages/AccountSecurity/invitation/invitation' // 跳转到目标页面的路径
			});
		},
		public() {
			this.$modal.showToast('暂未开放');
		}
	}
};
</script>

<style lang="scss" scoped>
.msg-box {
	width: 680rpx;
	height: 176rpx;
	margin-left: 35rpx;
	position: relative;
	margin-top: -20rpx;

	.myduck {
		position: absolute;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 500;
		color: #ffffff;
		top: 0;
		padding: 30rpx 26.16rpx;
	}

	image {
		width: 680rpx;
		height: 176rpx;
	}
}

.conterakpap {
	padding-top: 50rpx;
	position: relative;

	// 消息
	.Setupthes {
		top: 130rpx;
		right: 185rpx;
		position: absolute;

		image {
			width: 65rpx;
			height: 61rpx;
		}
	}

	.Setulkljk {
		top: 130rpx;
		right: 275rpx;
		position: absolute;

		image {
			width: 65rpx;
			height: 61rpx;
		}
	}

	// 消息
	.Avatar {
		width: 100%;
		height: 211.05rpx;

		.avatar {
			position: absolute;
			width: 106rpx;
			height: 106rpx;
			opacity: 1;
			border-radius: 50%;
			border: 2rpx solid #8e97a8;
			margin: 56rpx 34.88rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		.Name {
			position: absolute;
			margin: 71.05rpx 166.16rpx;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 900;
			color: #ffffff;
			width: 120px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.Blockchain {
			position: absolute;
			margin: 120.12rpx 166.16rpx;
			font-size: 21rpx;
			font-family: font;
			font-weight: 700;
			display: flex;
			color: #ffffff;

			.Blockchain-name {
				width: 280rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.Wallet {
			position: absolute;
			top: 105rpx;
			right: 36.88rpx;

			image {
				width: 122rpx;
				height: 110rpx;
			}
		}
	}

	// 头像
	//背包道具
	.purchase-box {
		margin: 34.88rpx 34.88rpx;
		width: 680rpx;
		height: 235rpx;
		background: #15132a;
		border-radius: 17rpx;
		opacity: 1;
		flex-direction: column;

		.order-txt {
			font-family: 'font';
			margin-left: 21rpx;
			margin-top: 21rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;
		}

		.purchase {
			display: flex;
			flex-wrap: wrap;
			width: 680rpx;
			padding: 31rpx 40rpx;
			justify-content: space-between;
			position: relative;
			.order-box {
				width: 130rpx;
				// height: 98rpx;
				// text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				text {
					margin-top: 15rpx;
					display: inline-block;
					font-family: 'font';
					font-weight: 350;
					font-size: 24rpx;
					color: #ffffff;
				}
			}

			.order-boxtow {
				width: 98rpx;
				height: 98rpx;
				position: absolute;
				top: 200rpx;
				text-align: center;
				text {
					display: inline-block;
					margin-top: 25rpx;
					font-family: 'font';
					font-weight: 350;
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
	}

	//购买的
	// 邀请
	.invite-box {
		margin: 34.88rpx 34.88rpx;
		width: 680rpx;
		height: 213rpx;
		background: #15132a;
		border-radius: 17rpx;
		position: relative;

		.invite-box-header {
			display: flex;
			flex-direction: column;
			padding: 21rpx 27rpx;

			.num {
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
			}

			.reward {
				font-size: 24rpx;
				font-family: 'font';
				font-weight: 400;
				color: #3c424d;
				margin-top: 5rpx;
			}
		}

		.invite-box-footer {
			.left {
				position: absolute;
				right: 68rpx;
				top: 30rpx;
				padding: 30rpx 0;

				.box {
					display: flex;

					.shu {
						height: 54rpx;
						font-size: 38rpx;
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
						line-height: 54rpx;
						display: flex;
					}

					.ge {
						height: 60rpx;
						transform: scale(0.8);
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
						line-height: 60rpx;
					}
				}

				.box1 {
					color: #3c424d;
					font-family: 'font';
					font-weight: 400;
					transform: scale(0.8);
					margin-top: -10rpx;
					margin-left: -8rpx;
				}
			}

			.right {
				width: 153rpx;
				height: 70rpx;
				background: #211f30;
				border: 2rpx solid #3c424d;
				border-radius: 10rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				position: absolute;
				bottom: 24rpx;
				left: 27rpx;
			}
		}
	}

	// 邀请
	// 订单
	.order {
		margin: 34.88rpx 34.88rpx;
		width: 680rpx;
		height: 164rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx;
		opacity: 1;
		display: flex;
		justify-content: space-evenly;

		.orderpapa {
			.order1 {
				margin: 40rpx 34.88rpx;
				width: 60rpx;
			}
		}
	}

	// 订单
}
</style>
